@import "app.var.less";

@default-outer-style: { border: 2pt solid #dcdcdc; border-radius: 10pt; };
@default-row: { padding-left: 32pt; padding-right: 32pt; };

.btn() {
  border: 2pt solid transparent;
  &:after {
    border: none;
  }
}

#reset {
  .van-input-disabled(@style: {}) {
    .van-field__input--disabled {
      color: #000000;
      @style();
    }
  }
  .clear-van-cell-after() {
    .van-cell {
      &:after {
        content: none;
      }
    }
  }
}

#default {

  .border(@dir: top) {
    & when (@dir = all) {
      border: 2pt solid #dcdcdc;
    }
    & when not (@dir = all) {
      border-@{dir}: 2pt solid #dcdcdc;
    }
  }

  .font-style(@num) {
    & when (@num = 200) {
      font-size: 22pt;
      line-height: 30pt;
    }
    & when (@num = 300) {
      font-size: 26pt;
      line-height: 36pt;
    }
    & when (@num = 350) {
      font-size: 28pt;
      line-height: 38pt;
    }
    & when (@num = 400) {
      font-size: 30pt;
      line-height: 40pt;
    }
    & when (@num = 450) {
      font-size: 32pt;
      line-height: 44pt;
    }
    & when (@num = 500) {
      font-size: 33pt;
      line-height: 46pt;
    }
    & when (@num = 600) {
      font-size: 36pt;
      line-height: 50pt;
    }
  }

  .modal-content-style() {
    text-align: center;
    color: @text-color-gray;
  }


  .textarea(@wrapstyle, @textareaStyle: {}) {
    .mt-textarea-wrap {
      @wrapstyle();
    }
    .van-cell {
      padding: 0;

      &:after {
        content: none;
      }
    }
    .textarea-placeholder {
      color: @text-color-gray-300;
      line-height: 35pt;
      font-size: 30pt;
      opacity: 1;
    }
    .van-field__body {
      textarea {
        padding: 0;

        @textareaStyle();
      }
    }
    .moni-textarea {
      padding: 0;
      @textareaStyle();
      box-sizing: border-box;
    }
  }


  .boder-input() {
    #default.border(all);
    #default.font-style(400);
    padding: 18pt 32pt;
    border-radius: 10pt;
    .input-placeholder {
      color: @text-color-gray;
    }
  }

  .gray-page() {
    page {
      background-color: @text-color-gray-150;
    }
  }

  .btn-outline() {
    .btn();
    border-radius: 10pt;
    background-color: transparent;
  }

  .pline() {
    #utils.clearfix();
    &-h {
      float: left;
    }
    &-c {
      width: 100%;
      box-sizing: border-box;
    }
  }
}


#utils {
  .size(@w, @h: @w) {
    width: @w;
    height: @h;
  }
  .arrow-down(@color, @len) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @len @len 0 @len;
    border-color: @color transparent transparent transparent;
  }
  .fixed(@zIndex: 1) {
    position: absolute;
    left: 0;
    top: 0;
    z-index: @zIndex;
  }
  .full-fixed() {
    #utils.fixed();
    width: 100%;
    height: 100%;
  }
  .dashed(@width, @color: #555555) {
    background-image: linear-gradient(to right, transparent 50%, @color 50%);
    background-size: @width 100%;
  }
  .text-overflow() {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .text(@fz: '', @lh: '', @color: '') {
    & when not (@fz = '') {
      font-size: @fz
    }
    & when not (@lh = '') {
      line-height: @lh
    }
    & when not (@color = '') {
      color: @color
    }
  }
  .ctext(@fz, @color: '') {
    #utils.text(@fz, @fz * 1.4, @color)
  }
  .clearfix() {
    zoom:1;
    &::after{
      content:"";
      display:table;
      clear: both;
    }
  }
  .paddingh(@left, @right: @left) {
    padding-left: @left;
    padding-right: @right;
  }
  .paddingv(@top, @bottom: @top) {
    padding-top: @top;
    padding-bottom: @bottom;
  }
}


#dialog {
  .init(@name, @dialogStyle) {
    .overlay-@{name}--van-overlay {
      background-color: rgba(0, 0, 0, .5) !important;
    }

    .van-hairline--top {
      //#default.border(top);
      &:after {
        border-color: @text-color-gray-300;
      }
    }

    .van-hairline--right {
      //#default.border(right);
      &:after {
        border-color: @text-color-gray-300;
      }
    }

    .van-dialog__message {
      color: @text-color-gray;
      padding: 115pt 29pt 77pt;
      line-height: 40pt;
      font-size: 30pt;
    }

    .dialog-@{name}--van-dialog {
      width: 560pt;
      @dialogStyle()
    }

    .dialog-@{name}--van-dialog__cancel, .dialog-@{name}--van-dialog__confirm {
      font-size: 36pt;
      line-height: 50pt;
      padding-top: 24pt;
      padding-bottom: 24pt;
    }

    .dialog-@{name}-van-dialog__cancel {
      color: #000000 !important;

      &:active {
        color: #000000 !important;
      }
    }

    .dialog-@{name}--van-dialog__confirm {
      color: @text-color-default !important;

      &:active {
        color: @text-color-default !important;
      }
    }
  }
}

#part {





}



